<template>
	<view class="">
		<view class="">
		<van-search
		  :value="value"
		  placeholder="请输入搜索关键词"
		  use-action-slot
		  @change="onChange"
		  @search="onClick"
		>
		  <view slot="action" @tap="onClick">搜索</view>
		</van-search>
		</view>
		<view class="caty-order">
			<text>历史记录</text>
			<image src="@/static/icon/删除(1) 1.png" class="caty-test" style="color: #818080; font-weight: 500; font-size: 28rpx;" @click="empty"></image>
		</view>
		<view class="caty-iciter" v-for="(item,index) in listinfo" :key="index" @click="souus(item)">
			{{item}}
		</view> 
	</view>
</template>

<script>
	export default{
		data(){
			return{
				keyword:'',
				listinfo:[],
				adeslocr:[],
			}
		},
		onLoad(){
			this.loachver()
		}, 
		methods:{ 
			loachver(){
				if(wx.getStorageSync('fitment')){
				 this.listinfo = wx.getStorageSync('fitment')
				 this.adeslocr = this.listinfo
				 }
			},
			// 用户输入时触发   
			onChange(value){
				this.keyword = value.detail
			}, 
			// 搜索
			onClick(){
				if(this.keyword.trim() != ''){
					this.adeslocr.push(this.keyword)
					this.listinfo = Array.from(new Set(this.adeslocr))
					wx.setStorage({ 
						key:'fitment',
						data:this.listinfo
					}) 
					uni.navigateTo({
						url: `/pages/category/fitment?text=${this.keyword}`,
						})
				} else{
					return
				}
			},
			souus(item){
				this.keyword = item
				this.onClick()
			},
			// 清空历史记录
			empty(){
				this.adeslocr = []
				this.listinfo = []
				wx.setStorage({
					key:'fitment',
					data:this.listinfo
				})
			}
		}
	}
</script>

<style lang="scss">
	.van-search--withaction{
		width: 95% !important;
	}
	.caty-order{
		margin-top: 30rpx;
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #1d1d1d;
		margin-bottom: 30rpx;
		.caty-test{
			float: right;
			margin-right: 20rpx;
			width: 35rpx;
			height: 35rpx;
		}
	}
	.caty-iciter{
		display: inline-block;
		margin-left: 30rpx; 
		margin-bottom: 25rpx;
		font-size: 24rpx;
		background-color: #f9f9f9;
		color: #727272;
		border-radius: 20px;
		padding: 5rpx 30rpx;
	}
	.van-search__content--square{
		border-radius: 20px !important;
		border: 1px solid #eeeeee !important;
		margin-right: 15rpx;
	}
</style>